<template>
  <div style=" width: 130vh;margin: auto">
    <span style="color: black;font-size: 30px;">上海 SHANGHAI</span>
    <p style="font-size: 20px">
      <span @click="router.push('/travelguide')"><el-icon style="color: #007BFF"><CaretTop /></el-icon>景点</span>
      <span @click="router.push('/searchHotel')"><el-icon style="color: mediumpurple"><OfficeBuilding /></el-icon>住宿</span>
      <el-icon style="color: orangered"><ForkSpoon /></el-icon>美食
      <el-icon style="color: red"><Goods /></el-icon>购物
      <span @click="router.push('/travel')"><el-icon style="color: orangered"><Printer /></el-icon>游记</span>
      <span @click="router.push('/travelguide')"><el-icon style="color: blue"><UserFilled /></el-icon>当地导向</span>
      <span @click="router.push('/travel')"><el-icon style="color: green;"><Location /></el-icon>旅游度假</span></p>

    <img src="/imgs/c1.jpg" style="width: 100%;height:450px;"/>
    <br>
    <span>必玩 必吃 必逛</span>
    <br>
    <el-row :gutter="10">
      <el-col :span="8" v-for="(p,index) in productArr" style="margin: 10px 0;" :key="index">
        <el-card>
          <img :src="p.url" style="width:100%;height: 100%;">
          <p>{{p.title}}</p>
          <div style="color:#3398eb;display:flex;margin-bottom:10px">
            <div v-if="p.lvcard >= 3"><b>4.7分</b></div><br>
            <div style="font-size:15px;color: gray">24w条点评</div>
          </div>
          <div>
            <span style="color: gray;">{{p.price}}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
   <span>上海游记</span>
    <br>
    <el-card style="width: 100%;margin-top: 10px" v-for="h in hotelList">
      <el-row>
        <el-col :span="6">
          <img :src="h.url" style="width: 100%; border-radius: 10px;">
        </el-col>
        <el-col :span="16">
          <span style="font-size:20px;margin: 5px" >{{h.title}}</span>
          <br>
          <br>
          <div style="color:gray;font-size: 13px;margin:10px">{{h.desc}}</div>
          <div style="margin: 130px 60px 5px 20px;color: gray"><el-icon><Picture /></el-icon>{{h.one}}
                                                               <el-icon><Comment /></el-icon>{{h.two}}
                                                                <el-icon><View /></el-icon>{{h.three}}
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import {ref} from "vue";
import router from "@/router";


//根据搜索条件查询出来的酒店
const hotelList = ref([
  {title: "【环洲苏州河】除了《八佰》和四行仓库，还有很多值得打卡的地儿", url: "/imgs/m.jpg",desc:"一部抗日电影《八佰》，让苏州河畔默默伫立的四行仓库，重回大众视野，成了眼下热门的打卡地，连带着苏州河",one: 192,two:45,three:89897},
  {title: "【魔都暴走记】你是我脑海中鲜明的记忆,做一场与上海有关的白日梦", url: "/imgs/n.jpg",desc:"写在前面与朋友前几个月约好的 上海 之旅，一直因各种忙碌与天气原因而拖延至今。这不",one: 180,two:67,three:23454},
  {title: "重庆在逃公主在上海迪士尼度假区3日深度游 附上海吃住行购集合",  url: "/imgs/q.jpg",desc:"是的，我又去迪士尼了！继香港，美国（洛杉矶），日本东京以后，这次，我来到了上海迪士尼",one: 227,two:88,three:356327},
  {title: "放肆嗨玩,上海欢乐谷,玛雅公园全体验,Happy一夏天| 上海",  url: "/imgs/t.jpg",desc:"临时的毕业旅行“涛涛，毕业出不出去耍？”“好啊，去哪里？”“你想去哪里？”“我想玩点",one: 330,two:78,three: 7777},
  {title: "繁华深处有自在！四条“小众”线路探寻魔都上海之“魔”", url: "/imgs/s.jpg",desc:"魔都上海，一个不管你去了几次，都还想再去一次的地方。没有原因，没有理由，就是一种缘分",one: 330,two:90,three: 4546},
  {title: "【老挝泰国旅行】2020新年第一场旅行：老挝泰美奇境之旅", url: "/imgs/z.jpg",desc:"前言对于东南亚的神佛，我满怀敬仰，每一次出行都是朝圣之旅！杭州的冬来得格外湿冷一些，",one: 223,two:66,three: 565656},
]);
const productArr = ref([
  {title: "上海迪士尼度假区", price:'充满欢乐童真的梦幻乐园', url: "/imgs/c2.jpg",lvcard:3},
  {title: "东方明珠", price: '360度欣赏申城的地标', url: "/imgs/c3.jpg",lvcard:3},
  {title: "上海海昌海洋公园", price: '看珍稀海洋生物玩刺激项目',  url: "/imgs/c4.jpg",lvcard:3},
  {title: "豫园", price: '留存完好的百年古典园林',  url: "/imgs/c5.jpg",lvcard:3},
  {title: "上海野生动物园", price: '与世界各地动物亲密接触', url: "/imgs/c6.jpg",lvcard:3},
  {title: "外滩", price: '欣赏万国建筑和浦江美景',  url: "/imgs/c7.jpg",lvcard:3}]);

</script>

<style scoped>

.hotel-search h2 {
  text-align: left;
  margin-bottom: 20px;
  color: #fff;
}

.form-group button {
  width: 110px;
  height: 85px;
  padding: 12px;
  margin-top: 15px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 20px;
  transition: background-color 0.3s ease;
}

</style>